let $ = (sel,parent) => {
    // 有parent就用parent,否则用document
    //parent = typeof(parent) === 'undefined' ? document : parent;  
    parent = parent === undefined ? document : parent;
    return parent.querySelector(sel);
},
all = (sel,parent) => {
    parent = parent === undefined ? document : parent;
    return [...parent.querySelectorAll(sel)];
}

let wrap = $('.wrap'),
    boxs = all('.con',wrap),
    new_datas,
    mid,
    cid;

boxs.forEach((box,idx) => {
    box.addEventListener('click',(e) => {
        let target = e.target,
            node = target.nodeName,
            list = box.lastElementChild,   //  ul
            tit = box.firstElementChild,  // h4
            next = target.parentNode.nextElementSibling;
        if(node === 'H4'){
            // 如果是城市
            if(target.id === 'mit'){
                new_datas = datas;
                next.firstElementChild.innerHTML = '请选择城市';
                next.nextElementSibling.firstElementChild.innerHTML = '请选择区';
                next.nextElementSibling.lastElementChild.classList.remove('show');
            }else if(target.id === 'city'){
                new_datas = datas[mid].city;
                next.firstElementChild.innerHTML = '请选择区';
            }else{
                new_datas = datas[mid].city[cid].area;
                target.parentNode.previousElementSibling.lastElementChild.classList.remove('show');
            }
            next && next.lastElementChild.classList.remove('show');
            list.classList.toggle('show');
        }else if(node === 'LI'){
            tit.innerHTML = target.innerHTML;
            list.classList.remove('show');
            // 如果li是市里的，则给cid赋值
            if(tit.id === 'mit'){
                mid = target.getAttribute('data-id');
            }else if(tit.id === 'city'){
                cid = target.getAttribute('data-id');
            }
            console.log(mid+','+cid);
        }
        renderToDom(list,new_datas);
    })
})

function renderToDom(ele,endDatas){
    ele.innerHTML = endDatas.map((data,idx) => {
        let name = data.name ? data.name : data;
        return '<li data-id="'+ idx +'">' + name + '</li>';
    }).join('');
}
